<template>
    <div>
        <form @submit.prevent="updateUser">
            <p class="un">{{user.username}}</p>
            <br>
            <textarea class="txt3" v-model="user.password" required></textarea>
            <br>
            <button type="submit" class="btn">SAVE</button>
        </form>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            user: {
                username: "",
                password: ""
            }
        };
    },
    mounted() {
        this.getUser();
    },
    methods: {
        getUser() {
            const id = this.$route.params.id;
            axios.get(`/api/users/${id}`)
                .then(response => {
                    this.user = response.data;
                })
                .catch(error => {
                    console.error(error);
                });
        },
        updateUser() {
            const id = this.$route.params.id;
            axios.put(`/api/users/${id}`, this.user)
                .then(response => {
                    console.log(response.data);
                    alert("修改成功")
                    this.$router.replace({ path: "/admin/userIndex" });
                })
                .catch(error => {
                    console.error(error);
                });
        }
    }
};
</script>
<style>
.un{
  font-weight: bold;
  font-size: 25px;
  margin-top: 185px;
}
textarea{
  color:#2c3e50;
  font-size: 15px;
  font-weight: bold;
}
.txt3{
  color:#2c3e50;
  font-size: 15px;
  font-weight: bold;
  margin-top: 12px;
  width: 225px;
  height: 45px;
  outline: none;
  border:2px solid #000000;
  border-radius: 5px;
  background:transparent;
}
</style>
